<template>
  <div class="box">
    <var-sticky :offset-top="0" class="top">
      <var-app-bar title="萌虎壁纸" title-position="center" />
    </var-sticky>
    <div class="body">
      <var-tabs
        class="tabs"
        elevation
        layout-direction="vertical"
        indicator-size="4px"
        v-model:active="active"
      >
        <var-tab
          v-for="item in types"
          :key="item.value"
          :name="item.value"
          @click="selectTypes(item.children)"
        >
          {{ item.label }}
        </var-tab>
      </var-tabs>
      <div class="mytag">
        <div class="space">
          <var-button
            v-for="item in imgTags"
            :type="item.color"
            size="small"
            @click="goImgDetails(item.value)"
          >
            {{ item.label }}
          </var-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { types } from './searchType'
import { useRouter } from 'vue-router'
const $router = useRouter()
const imgTypes: any = ref([])
const imgTags: any = ref([])
const tagColors: string[] = [
  'primary',
  'success',
  'warning',
  'danger',
  'info',
  '',
]
const active = ref(0)

// 随机返回颜色
const randomColor = (): string => {
  return tagColors[Math.floor(Math.random() * tagColors.length)]
}
const selectTypes = (val: any) => {
  imgTags.value = val.map((item: any) => {
    return {
      label: item.label,
      value: item.value,
      color: randomColor(),
    }
  })
}
const goImgDetails = (item: any) => {
  $router.push({ name: 'imgDetails', query: { id: item } })
}
onMounted(() => {
  imgTypes.value = types
  imgTags.value = types[0].children.map((item: any) => {
    return {
      label: item.label,
      value: item.value,
      color: randomColor(),
    }
  })
})
</script>

<script lang="ts">
export default {
  name: 'imgs',
}
</script>

<style scoped lang="scss">
.box {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;

  .body {
    width: 100%;
    flex: 1;
    overflow: hidden;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr;

    .tabs {
      height: 50%;
      width: 100%;
      overflow-y: auto;
    }

    .mytag {
      height: 100%;
      width: 100%;
      overflow-y: auto;

      .space {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        padding: 10px;
        gap: 10px;
      }
    }
  }
}
</style>
